<template>
  <div class="m-25 mt-65">
    <div class="normal-box-mod">
      <div class="normal-box-hd clearfix">
        <div class="normal-box-title">
          <div class="decorate-square"></div>
          <h2>详细账单</h2>
        </div>
      </div>
      <div class="normal-box-bd">
        <div class="normal-list-page-mod">
            <Card style="margin-bottom: 10px;">
                <div class="normal-list-page-hd clearfix">

                        账单类型：
                        <Select  v-model="queryData.tradeType" style="width:150px" :clearable=true>
                            <Option v-for="item in tradeType" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>

                    <Button type="primary" custom-icon="iconfont icon-chaxun" size="small" @click='inQuire' >查询</Button>
                </div>
            </Card>
            <div class="normal-list-page-bd">
                <Table border :loading="list.loading" :columns="list.columns" :data="list.tableData" ></Table>
            </div>
             <div>
                 <Page :total="queryData.totalRecord" :page-size="queryData.pageSize" :current="queryData.page" show-total show-elevator @on-change="changePage"></Page>
             </div>
        </div>

      </div>
    </div>
  </div>
</template>
<script>
import allBillApi from '@/api/bill/allBill.js'

import moment from 'moment'
import { Message } from 'iview'

export default {
  name: 'system',
  data () {
    return {
      tradeType: [
        {
          value: 1,
          label: '支付宝账单'
        },
        {
          value: 2,
          label: '微信账单'
        }
      ],
      // 列表
      list: {
        loading: false,
        selections: [],
        // 列表展示数据
        tableData: [],
        // 表格表头
        columns: [
          // 开始自动生成
          {
            title: '交易时间',
            align: 'center',
            key: 'tradeTime',
            minWidth: 100
          },
          {
            title: '订单金额',
            align: 'center',
            key: 'orderPay',
            minWidth: 100
          },
		  {
		    title: '实收金额',
            align: 'center',
		    key: 'orderAmount',
            minWidth: 100
		  },
          {
            title: '服务费',
            align: 'center',
            key: 'serviceCharge',
            minWidth: 100
          },
          {
            title: '支付方式',
            align: 'center',
            key: 'tradeType',
            minWidth: 100,
            render: (h, params) => {
              if (params.row.tradeType == 1) {
                return h('div', { style: { color: '#46A3FF' } }, '支付宝支付')
              } else if (params.row.tradeType == 2) {
                return h('div', { style: { color: '#00DB00' } }, '微信支付')
              }
            }
          }
          // 自动生成结束
        ]
      },
      // 页面查询数据
      queryData: {
        limit: 10,
        page: 1,
        totalRecord: 0,
        dateTime: ''
      },
      to: {
        path: 'allBill'
      }
    }
  },
  methods: {
    // 获取列表
    getTableData () {
      const that = this
      that.queryData.totalRecord = undefined
      that.queryData.dateTime = that.$route.query.dateTime
      allBillApi.getPageList(that.queryData)
        .then(res => {
          that.list.tableData = res.data.list
          that.queryData.totalRecord = res.data.totalRecord
          that.queryData.limit = res.data.pageSize
        })
        .catch(error => {
          Message.error(error)
        })
    },
    getTableData () {
      const that = this
      that.queryData.totalRecord = undefined
      that.queryData.dateTime = that.$route.query.dateTime
      allBillApi.getPageList(that.queryData)
        .then(res => {
          that.list.tableData = res.data.list
          that.queryData.totalRecord = res.data.totalRecord
          that.queryData.limit = res.data.pageSize
        })
        .catch(error => {
          Message.error(error)
        })
    },
    // 查询
    inQuire () {
      const that = this
      that.queryData.page = 1
      that.getTableData()
    },
    // 每页显示记录数变更
    onPageSizeChange (pageSize) {
      this.queryData.limit = pageSize
      this.getTableData()
    },
    // 换页
    changePage (page) {
      this.queryData.page = page
      this.getTableData()
    }

  },

  created () {
    this.getTableData()
  }
}
</script>
